<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<i class="material-icons">location_on</i>
					<div class="location-text" @click="toAddressSelect">{{ currentAddressText }}<i class="material-icons">arrow_drop_down</i></div>
				</section>
			</div>
		</header>

		<!-- search部分 -->
		<!-- 
					搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
					search-fixed-top块固定后，挡住下面块不要窜上去） 
				-->
		<div class="search">
			<!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
			<div class="search-fixed-top" ref="fixedBox">
				<!-- 搜索框部分中间的白框 -->
				<div class="search-box" @click="toSearch">
					<i class="material-icons">search</i>
					<span>搜索饿了么商家、商品名称</span>
				</div>
			</div>
		</div>

		<!-- 点餐分类部分 -->
		<ul class="foodtype">
			<li @click="toBusinessList(1)">
				<img src="../assets/dcfl01.png">
				<p>美食</p>
			</li>
			<li @click="toBusinessList(2)">
				<img src="../assets/dcfl02.png">
				<p>早餐</p>
			</li>
			<li @click="toBusinessList(3)">
				<img src="../assets/dcfl03.png">
				<p>跑腿代购</p>
			</li>
			<li @click="toBusinessList(4)">
				<img src="../assets/dcfl04.png">
				<p>汉堡披萨</p>
			</li>
			<li @click="toBusinessList(5)">
				<img src="../assets/dcfl05.png">
				<p>甜品饮品</p>
			</li>
			<li @click="toBusinessList(6)">
				<img src="../assets/dcfl06.png">
				<p>速食简餐</p>
			</li>
			<li @click="toBusinessList(7)">
				<img src="../assets/dcfl07.png">
				<p>地方小吃</p>
			</li>
			<li @click="toBusinessList(8)">
				<img src="../assets/dcfl08.png">
				<p>米粉面馆</p>
			</li>
			<li @click="toBusinessList(9)">
				<img src="../assets/dcfl09.png">
				<p>包子粥铺</p>
			</li>
			<li @click="toBusinessList(10)">
				<img src="../assets/dcfl10.png">
				<p>炸鸡炸串</p>
			</li>
		</ul>

			<!-- 横幅广告部分：轮播两个 banner -->
			<div class="banner-wrapper">
				<transition name="banner-fade" mode="out-in">
					<div class="banner" :key="banners[currentBannerIndex].id">
						<div class="banner-text">
							<h3>{{ banners[currentBannerIndex].title }}</h3>
							<p>{{ banners[currentBannerIndex].subtitle }}</p>
							<a>{{ banners[currentBannerIndex].cta }}</a>
						</div>
						<div class="banner-image-wrapper">
							<img :src="banners[currentBannerIndex].image" alt="banner" class="banner-image" />
						</div>
					</div>
				</transition>
			</div>

		<!-- 超级会员部分 -->
		<div class="supermember" @click="toSuperMember">
			<div class="left">
				<i class="material-icons supermember-icon">workspace_premium</i>
				<h3>超级会员</h3>
				<p>&#8226; 每月享超值权益</p>
			</div>
			<div class="right">
				立即开通 &gt;
			</div>
		</div>
		
		<!-- 积分商店部分 -->
		<div class="points-store" @click="toPointsStore">
			<div class="left">
				<i class="material-icons">stars</i>
				<h3>积分商店</h3>
				<p>&#8226; 积分兑换好礼</p>
			</div>
			<div class="right">
				立即兑换 &gt;
			</div>
		</div>

		<!-- 推荐商家部分 -->
		<div class="recommend">
			<div class="recommend-line"></div>
			<p>推荐商家</p>
			<div class="recommend-line"></div>
		</div>

		<!-- 推荐方式部分 -->
		<ul class="recommendtype">
			<li>综合排序<i class="material-icons">arrow_drop_down</i></li>
			<li>距离最近</li>
			<li>销量最高</li>
			<li>筛选<i class="material-icons">tune</i></li>
		</ul>

	<!-- 推荐商家列表部分 -->
	<ul class="business">
		<li
			v-for="item in recommendBusinesses"
			:key="item.businessId"
			@click="toBusinessInfo(item.businessId)"
			style="cursor: pointer;"
		>
			<img :src="getImg(item.businessImg)" @error="handleImageError">
			<div class="business-info">
				<div class="business-info-h">
					<h3>{{ item.businessName }}</h3>
					<div class="business-info-like">&#8226;</div>
				</div>
				<div class="business-info-star">
					<div class="business-info-star-left">
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<p>起送 ¥{{ item.starPrice }} · 配送 ¥{{ item.deliveryPrice }}</p>
					</div>
					<div class="business-info-star-right">
						蜂鸟专送
					</div>
				</div>
				<div class="business-info-delivery">
					<p>{{ item.businessAddress || '附近商家' }}</p>
					<p>30分钟内送达</p>
				</div>
				<div class="business-info-explain">
					<div>{{ item.businessExplain || '品质好店' }}</div>
				</div>
				<div class="business-info-promotion">
					<div class="business-info-promotion-left">
						<div class="business-info-promotion-left-incon">新</div>
						<p>饿了么新用户专享优惠</p>
					</div>
					<div class="business-info-promotion-right">
						<p>更多优惠</p>
						<i class="material-icons">arrow_drop_down</i>
					</div>
				</div>
			</div>
		</li>
	</ul>

		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	//导入共通组件
	import AppFooter from '../components/AppFooter.vue';
	
	export default {
		name: 'AppIndex',
		data() {
			return {
				user: null,
				currentAddressText: '天津大学（北洋园校区）',
				// 推荐商家列表（从后端动态加载）
				recommendBusinesses: [],
				// 首页轮播 banner 数据
				banners: [
					{
						id: 1,
						title: '品质套餐',
						subtitle: '搭配送齐全吃得好',
						cta: '立即抢购 >',
						// 饮料主题免扣 PNG（线上地址）
						image: 'https://assets-hs-cdn.soutushenqi.com/ai_images/d758a7d6-35e4-4c25-90c7-ba3a9601a0ed.png'
					},
					{
						id: 2,
						title: '校园夜宵节',
						subtitle: '汉堡炸鸡、川味小馆限时享',
						cta: '去看看 >',
						// 汉堡主题免扣 PNG（线上地址）
						image: 'https://img.cdn1.vip/i/692d77bd48622_1764587453.webp'
					},
					{
						id: 3,
						title: '万家饺子',
						subtitle: '校园现做现卖',
						cta: '去下单 >',
						// 汉堡主题免扣 PNG（线上地址）
						image: 'https://img.cdn1.vip/i/692d7b0782bd2_1764588295.webp'
					},
				],
				currentBannerIndex: 0,
				bannerTimer: null
			}
		},
		created() {
			// 获取当前登录用户
			const user = this.$getSessionStorage('user');
			if (!user) {
				// 未登录，保持默认地址，但仍然可以加载推荐商家
				this.loadRecommendBusinesses();
				return;
			}
			this.user = user;
			// 查询用户的送货地址列表，取第一条作为首页显示地址
			this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId', this.$qs.stringify({
				userId: this.user.userId
			})).then(response => {
				const list = response.data || [];
				if (Array.isArray(list) && list.length > 0 && list[0].address) {
					this.currentAddressText = list[0].address;
				}
			}).catch(error => {
				console.error('获取用户地址失败:', error);
				// 出错时保持默认地址
			});
			// 无论如何都加载推荐商家
			this.loadRecommendBusinesses();
		},
		mounted() {
			document.onscroll = ()=> {
				//获取滚动条位置
				let s1 = document.documentElement.scrollTop;
				let s2 = document.body.scrollTop;
				let scroll = s1 == 0 ? s2 : s1;
				//获取视口宽度
				let width = document.documentElement.clientWidth;
				
				//获取顶部固定块
				let search = this.$refs.fixedBox;
				
				//判断滚动条超过视口宽度的12%时，搜索块变固定定位
				if (scroll > width * 0.12) {
					search.style.position = 'fixed';
					search.style.left = '0';
					search.style.top = '0';
				} else {
					search.style.position = 'static';
				}
			}
		},
		unmounted() {
			//当切换到其他组件时，就不需要document滚动条事件，所以将此事件去掉
			document.onscroll = null;
			// 清除 banner 轮播定时器
			if (this.bannerTimer) {
				clearInterval(this.bannerTimer);
				this.bannerTimer = null;
			}
		},
		components:{
			AppFooter
		},
		methods:{
			// 图片路径处理，复用 BusinessList 的逻辑
			getImg(path){
				if(!path) return this.getDefaultImage();
				// 如果是完整的HTTP URL，直接返回
				if(path.startsWith('http')) return path;
				// 如果是 base64 格式，直接返回
				if(path.startsWith('data:image')) return path;
				// 如果是相对路径（以/开头），拼接服务器地址
				if(path.startsWith('/')) {
					// 如果已经是 /img/ 开头，直接拼接
					if(path.startsWith('/img/')) {
						return 'http://localhost:8888' + path;
					}
					// 其他路径（如 /2024-10-26/xxx.jpg），添加 /img 前缀
					return 'http://localhost:8888/img' + path;
				}
				// 其他情况，添加服务器前缀和路径分隔符
				return 'http://localhost:8888/img/' + path;
			},
			getDefaultImage(){
				const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#f5f5f5" rx="10"/><text x="100" y="100" font-size="80" text-anchor="middle" dominant-baseline="central">🥡</text></svg>';
				return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
			},
			handleImageError(event){
				event.target.src = this.getDefaultImage();
			},
			// 加载推荐商家（从多个分类中各取若干条）
			loadRecommendBusinesses(){
				// 这里选择几个常用分类 ID，从每个分类取前几家作为推荐
				const typeIds = [1, 2, 4, 5, 7, 9];
				const requests = typeIds.map(id => {
					return this.$axios.post('BusinessController/listBusinessByOrderTypeId', this.$qs.stringify({
						orderTypeId: id
					})).then(resp => resp.data || []).catch(() => []);
				});
				Promise.all(requests).then(results => {
					// 展平并去重（按 businessId）
					const map = new Map();
					results.forEach(list => {
						(list || []).forEach(b => {
							if(b && b.businessId && !map.has(b.businessId)){
								map.set(b.businessId, b);
							}
						});
					});
					// 只取前 10 家作为推荐
					this.recommendBusinesses = Array.from(map.values()).slice(0,10);
				}).catch(err => {
					console.error('加载推荐商家失败:', err);
				});
				// 启动 banner 轮播（每 5 秒切换一次）
				if (!this.bannerTimer && this.banners.length > 1) {
					this.bannerTimer = setInterval(() => {
						this.currentBannerIndex = (this.currentBannerIndex + 1) % this.banners.length;
					}, 5000);
				}
			},
			toBusinessList(orderTypeId){
				this.$router.push({path:'/businessList',query:{orderTypeId:orderTypeId}});
			},
			toBusinessInfo(businessId){
				this.$router.push({path:'/businessInfo',query:{businessId:businessId}});
			},
			toPointsStore(){
				this.$router.push('/pointsStore');
			},
			toSuperMember(){
				this.$router.push('/superMember');
			},
			// 选择/管理地址
			toAddressSelect(){
				this.$router.push('/userAddress');
			},
			// 顶部搜索框点击：跳转到商家列表（默认美食分类）
			toSearch(){
				this.$router.push({ path: '/businessList', query: { orderTypeId: 1 }});
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	/* 给页面内容预留出与footer等高的空间 */
	.content {
		flex: 1;
		padding-bottom: 120px; /*设置与 footer 高度相同的底部内边距 */
	}

	/****************** header ******************/
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 16px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-direction: row;
	}

	.mdc-top-app-bar__section .material-icons {
		font-size: 24px;
		color: white;
	}

	.location-text {
		font-size: 16px;
		font-weight: 500;
		color: #fff;
		display: flex;
		align-items: center;
		gap: 4px;
		cursor: pointer;
	}

	.location-text .material-icons {
		font-size: 20px;
	}

	/****************** search ******************/
	.wrapper .search {
		width: 100%;
		height: 64px;
	}

	.wrapper .search .search-fixed-top {
		width: 100%;
		height: 64px;
		background-color: #1976D2;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.wrapper .search .search-fixed-top .search-box {
		width: 90%;
		height: 48px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);

		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 16px;
		gap: 12px;

		font-size: 14px;
		color: #999;
		/*此样式是让文本选中状态无效*/
		user-select: none;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.wrapper .search .search-fixed-top .search-box:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.wrapper .search .search-fixed-top .search-box .material-icons {
		font-size: 20px;
		color: #666;
	}

	/****************** 点餐分类部分 ******************/
	.wrapper .foodtype {
		width: 100%;
		background-color: #fff;
		padding: 16px 8px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);

		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		/*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
		align-content: center;
	}

	.wrapper .foodtype li {
		/*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
		width: 18vw;
		height: 20vw;

		display: flex;
		/*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
		flex-direction: column;
		justify-content: center;
		align-items: center;

		user-select: none;
		cursor: pointer;
		transition: all 0.3s ease;
		border-radius: 12px;
		padding: 8px;
	}

	.wrapper .foodtype li:hover {
		background-color: #f5f5f5;
		transform: translateY(-2px);
	}

	.wrapper .foodtype li img {
		width: 12vw;
		/*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
		height: 10.3vw;
		border-radius: 8px;
	}

	.wrapper .foodtype li p {
		font-size: 3.2vw;
		color: #333;
		font-weight: 500;
		margin-top: 4px;
	}

	/****************** 横幅广告部分 ******************/
	.banner-wrapper {
		width: 95%;
		margin: 12px auto;
	}

	.wrapper .banner {
		width: 100%;
		height: 29vw;
		/* 浅蓝色纯色背景为主，弱化背景图 */
		background-color: #e3f2fd;
		/* 如果希望保留一点纹理，可以打开下一行并将图片做成半透明
		background-image: url(../assets/index_banner.png);
		background-repeat: no-repeat;
		background-size: cover;
		*/
		border-radius: 16px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		overflow: hidden;
		box-sizing: border-box;
		padding: 3vw 6vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	/* banner 淡入淡出非线性动画 */
	.banner-fade-enter-active,
	.banner-fade-leave-active {
		transition: opacity 0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
				transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	.banner-fade-enter-from,
	.banner-fade-leave-to {
		opacity: 0;
		transform: translateY(6px);
	}

	.banner-text h3 {
		font-size: 4.6vw;
		margin-bottom: 1.8vw;
		font-weight: 600;
		color: #0d47a1;
	}

	.banner-text p {
		font-size: 3.4vw;
		color: #455a64;
		margin-bottom: 2.8vw;
	}

	.banner-text a {
		font-size: 3.2vw;
		color: #1565C0;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		padding: 1vw 2.5vw;
		border-radius: 999px;
		background-color: rgba(25, 118, 210, 0.08);
	}

	.banner-text a:hover {
		color: #0d47a1;
		background-color: rgba(25, 118, 210, 0.16);
	}

	.banner-image-wrapper {
		position: relative;
		flex-shrink: 0;
		/* 缩小容器尺寸，避免图片过大 */
		width: 90vw;
		height: 60vw;
		max-width: 190px;
		max-height: 160px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-image {
		width: 150%;
		height: 100%;
		/* 强制按比例缩放在容器内，不裁切 */
		object-fit: cover;
		border-radius: 20px;
		/* 稍微向右、向上偏移 */
		transform: translate(16px, -10px);
		transition: transform 0.4s ease, box-shadow 0.4s ease;
	}

	.banner:hover .banner-image {
		transform: translate(6px, -12px);
		box-shadow: 0 14px 26px rgba(0,0,0,0.22);
	}

	/****************** 超级会员部分 ******************/
	.wrapper .supermember {
		/*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
		width: 95%;
		margin: 12px auto;
		height: 60px;
		background: linear-gradient(135deg, #FFE082 0%, #FFCC02 100%);
		border-radius: 12px;
		color: #644F1B;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);

		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16px;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.wrapper .supermember:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transform: translateY(-2px);
	}

	.wrapper .supermember .left {
		display: flex;
		align-items: center;
		user-select: none;
	}

	.supermember-icon {
		font-size: 32px;
		margin-right: 12px;
		color: #ffb300;
		text-shadow: 0 2px 4px rgba(0,0,0,0.15);
	}

	.wrapper .supermember .left h3 {
		font-size: 16px;
		margin-right: 8px;
		font-weight: 500;
	}

	.wrapper .supermember .left p {
		font-size: 12px;
		opacity: 0.9;
	}

	.wrapper .supermember .right {
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.wrapper .supermember .right::after {
		content: '→';
		font-size: 16px;
	}
	
	/****************** 积分商店部分 ******************/
	.wrapper .points-store {
		width: 95%;
		margin: 12px auto;
		height: 60px;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 12px;
		color: #644F1B;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16px;
		transition: all 0.3s ease;
		cursor: pointer;
	}
	
	.wrapper .points-store:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transform: translateY(-2px);
	}
	
	.wrapper .points-store .left {
		display: flex;
		align-items: center;
		user-select: none;
	}
	
	.wrapper .points-store .left .material-icons {
		font-size: 32px;
		margin-right: 12px;
		color: #644F1B;
	}
	
	.wrapper .points-store .left h3 {
		font-size: 16px;
		margin-right: 8px;
		font-weight: 500;
	}
	
	.wrapper .points-store .left p {
		font-size: 12px;
		opacity: 0.9;
	}
	
	.wrapper .points-store .right {
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 4px;
	}
	
	.wrapper .points-store .right::after {
		content: '→';
		font-size: 16px;
	}

	/****************** 推荐商家部分 ******************/
	.wrapper .recommend {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		margin: 12px 0;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}

	.wrapper .recommend .recommend-line {
		width: 40px;
		height: 2px;
		background-color: #1976D2;
		border-radius: 2px;
	}

	.wrapper .recommend p {
		font-size: 18px;
		margin: 0 16px;
		font-weight: 500;
		color: #333;
	}

	/****************** 推荐方式部分 ******************/
	.wrapper .recommendtype {
		width: 100%;
		height: 48px;
		margin-bottom: 12px;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);

		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 16px;
	}

	.wrapper .recommendtype li {
		font-size: 14px;
		color: #666;
		cursor: pointer;
		padding: 8px 12px;
		border-radius: 8px;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		gap: 4px;
		user-select: none;
	}

	.wrapper .recommendtype li:hover {
		background-color: #f5f5f5;
		color: #1976D2;
	}

	.wrapper .recommendtype li .material-icons {
		font-size: 18px;
	}

	/****************** 推荐商家列表部分 ******************/
	.wrapper .business {
		width: 100%;
		margin-bottom: 80px;
		padding: 0 12px;
	}

	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 16px;
		user-select: none;
		background-color: #fff;
		border-radius: 12px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: all 0.3s ease;

		display: flex;
	}

	.wrapper .business li:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.12);
		transform: translateY(-2px);
	}

	.wrapper .business li img {
		width: 80px;
		height: 80px;
		border-radius: 12px;
		object-fit: cover;
	}

	.wrapper .business li .business-info {
		width: 100%;
		box-sizing: border-box;
		padding-left: 16px;
	}

	.wrapper .business li .business-info .business-info-h {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.wrapper .business li .business-info .business-info-h h3 {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		flex: 1;
	}

	.wrapper .business li .business-info .business-info-h .business-info-like {
		width: 24px;
		height: 24px;
		background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
		color: #fff;
		font-size: 16px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.wrapper .business li .business-info .business-info-h .business-info-like:hover {
		transform: scale(1.1);
	}

	.wrapper .business li .business-info .business-info-star {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
		font-size: 12px;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-left {
		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-left .material-icons {
		color: #FEC80E;
		font-size: 16px;
		margin-right: 2px;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-left p {
		color: #666;
		margin-left: 4px;
		font-size: 12px;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-right {
		background-color: #1976D2;
		color: #fff;
		font-size: 10px;
		border-radius: 4px;
		padding: 2px 8px;
		font-weight: 500;
	}

	.wrapper .business li .business-info .business-info-delivery {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;

		color: #666;
		font-size: 12px;
	}

	.wrapper .business li .business-info .business-info-explain {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.wrapper .business li .business-info .business-info-explain div {
		border: solid 1px #e0e0e0;
		font-size: 11px;
		color: #666;
		border-radius: 4px;
		padding: 2px 8px;
		background-color: #f5f5f5;
	}

	.wrapper .business li .business-info .business-info-promotion {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6px;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left {
		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon {
		width: 20px;
		height: 20px;
		background-color: #70BC46;
		border-radius: 4px;
		font-size: 11px;
		color: #fff;
		font-weight: 600;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p {
		color: #666;
		font-size: 12px;
		margin-left: 8px;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right {
		display: flex;
		align-items: center;
		font-size: 11px;
		color: #999;
		gap: 4px;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right .material-icons {
		font-size: 16px;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p {
		margin-right: 0;
	}
</style>
